Для каких целей грид и флекс

Главная идея Grid Layout — разделение пространства на столбцы и строки. Распределять элементы можно сразу в двух направлениях: по горизонтали и вертикали. В отличие от флексбоксов, где главная ось всего одна. Поэтому гриды избавляют от большого количества обёрток вокруг элементов, которые во флексбоксах используются для выравнивания. Мы не хотим противопоставлять эти две технологии, но без сравнений не обойтись.

Гриды — там, где нужна чёткая структура. Например, чтобы создать общую сетку страницы.

Проектирование сложных сеток для элементов

Флексбоксы — для мест, где нужно выравнивание в строке или колонке. Например, расположить иконки соцсетей в ряд с равными расстояниями между ними.